﻿@page "/components/iconbutton"

<DocsPage>
    <DocsPageHeader Title="Icon Button">
        <Description>
            Similar to <CodeInline>MudButton</CodeInline> but with icons. For guidance and suggestions, go to <MudLink Href="/components/icons">Icons.</MudLink>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Icon Buttons">
                <Description>With the librarys preloaded icons. Check out our <MudLink Href="/features/icons">icon page</MudLink> to find out what you can use.</Description>
            </SectionHeader>
            <SectionContent Code="IconButtonSimpleExample">
                <IconButtonSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Using font icons">
                <Description>In this example, we are passing down <MudLink Href="https://fontawesome.com/icons">Font Awesome</MudLink> icon classes instead.</Description>
            </SectionHeader>
            <SectionContent Code="IconButtonFontIconExample">
                <IconButtonFontIconExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Variant">
                <Description>If preferred, it's possible to apply the same style of a text button using the <CodeInline>Variant</CodeInline> parameter.</Description>
            </SectionHeader>
            <SectionContent Code="IconButtonStyleExample">
                <IconButtonStyleExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
